<template>
    <view class="profile-page bg-gray-100 min-h-screen">
      <!-- 用户信息卡片 -->
      <view class="bg-green-600 p-4 flex items-center">
        <view class="w-16 h-16 rounded-full overflow-hidden mr-4 border-2 border-white">
          <image :src="studentInfo?.avatar || '/static/default-avatar.png'" mode="aspectFill" class="w-full h-full" />
        </view>
        <view class="flex-1 text-white">
          <text class="text-xl font-bold block">{{ studentInfo?.name || '未登录' }}</text>
          <text class="text-sm">{{ studentInfo?.department || '点击下方按钮注册账号' }}</text>
        </view>
      </view>
      
      <!-- 成就统计 -->
      <view class="bg-white p-4 flex justify-between">
        <view class="flex-1 flex flex-col items-center">
          <text class="text-2xl font-bold text-green-600">{{ runningData?.totalDays || 0 }}</text>
          <text class="text-xs text-gray-500">累计打卡</text>
        </view>
        <view class="flex-1 flex flex-col items-center border-l border-r border-gray-100">
          <text class="text-2xl font-bold text-green-600">{{ runningData?.totalDistance || 0 }}km</text>
          <text class="text-xs text-gray-500">累计里程</text>
        </view>
        <view class="flex-1 flex flex-col items-center">
          <text class="text-2xl font-bold text-green-600">{{ runningData?.points || 0 }}</text>
          <text class="text-xs text-gray-500">积分</text>
        </view>
      </view>
      
      <!-- 菜单列表 -->
      <view class="bg-white mt-4">
        <view class="flex items-center p-4 border-b border-gray-100">
          <view class="w-6 h-6 bg-green-100 rounded-full flex items-center justify-center mr-3">
            <text class="text-green-600 text-sm">奖</text>
          </view>
          <text class="flex-1">我的成就</text>
          <text class="text-gray-400">></text>
        </view>
        
        <view class="flex items-center p-4 border-b border-gray-100">
          <view class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center mr-3">
            <text class="text-blue-600 text-sm">历</text>
          </view>
          <text class="flex-1">跑步历史</text>
          <text class="text-gray-400">></text>
        </view>
        
        <view class="flex items-center p-4 border-b border-gray-100">
          <view class="w-6 h-6 bg-yellow-100 rounded-full flex items-center justify-center mr-3">
            <text class="text-yellow-600 text-sm">活</text>
          </view>
          <text class="flex-1">校园活动</text>
          <text class="text-gray-400">></text>
        </view>
        
        <view class="flex items-center p-4">
          <view class="w-6 h-6 bg-red-100 rounded-full flex items-center justify-center mr-3">
            <text class="text-red-600 text-sm">设</text>
          </view>
          <text class="flex-1">设置</text>
          <text class="text-gray-400">></text>
        </view>
      </view>
      
      <!-- 版本信息 -->
      <view class="p-4 flex justify-center">
        <text class="text-xs text-gray-400">跃动西大 v1.0.0</text>
      </view>
      
      <!-- 登录/注册/退出按钮 -->
      <view class="px-4 pb-8">
        <!-- 未登录状态显示登录按钮和注册提示 -->
        <template v-if="!userStore.isLoggedIn">
          <button 
            @click="goToLogin" 
            class="w-full bg-green-600 text-white py-3 rounded-lg"
          >
            登录
          </button>
          <view class="text-center mt-2 text-gray-500 text-xs">
            还没有账号？<text class="text-green-600" @click="goToRegister">请点击这里注册</text>
          </view>
        </template>
        
        <!-- 已登录状态显示退出按钮 -->
        <template v-else>
          <button 
            @click="logout" 
            class="w-full bg-red-500 text-white py-3 rounded-lg"
          >
            退出登录
          </button>
        </template>
      </view>
    </view>
  </template>
  
  <script setup>
  import { computed } from 'vue'
  import { useUserStore } from '@/store/modules/user'
  import { useRunningStore } from '@/store/modules/running'
  import { clearAuthInfo } from '@/utils/auth'
  import { logout as logoutApi } from '@/api/auth'

  // 使用Pinia Store
  const userStore = useUserStore()
  const runningStore = useRunningStore()

  // 从Store获取数据
  const studentInfo = computed(() => userStore.studentInfo)
  const runningData = computed(() => runningStore.runningData)

  // 跳转到注册页面
  function goToRegister() {
    uni.navigateTo({
      url: '/pages/profile/register'
    })
  }

  // 跳转到登录页面
  function goToLogin() {
    uni.navigateTo({
      url: '/pages/profile/login'
    })
  }

  // 退出登录
  function logout() {
    uni.showModal({
      title: '提示',
      content: '确定要退出登录吗？',
      success: function(res) {
        if (res.confirm) {
          // 显示加载中
          uni.showLoading({
            title: '退出中...'
          })
          
          // 调用后端退出接口
          logoutApi().then(() => {
            // 清除本地认证信息
            clearAuthInfo()
            // 重置用户状态
            userStore.resetState()
            // 隐藏加载中
            uni.hideLoading()
            // 提示退出成功
            uni.showToast({
              title: '退出登录成功',
              icon: 'success'
            })
          }).catch(error => {
            console.error('退出登录失败', error)
            // 隐藏加载中
            uni.hideLoading()
            // 即使后端调用失败，也清除本地信息
            clearAuthInfo()
            userStore.resetState()
            uni.showToast({
              title: '退出登录成功',
              icon: 'success'
            })
          })
        }
      }
    })
  }
  </script>